<template>
    <a-row :gutter="[16,8]">
        <a-col :sm="24" :md="24" :lg="24" :xl="10" :xxl="6">
            <div class="top-box">
                <div class="left-img"><img :src="getImageUrl('dingdan', 'main')" alt=""></div>
                <div class="top-midle">
                    <div class="top-midle-test">监测信息总量</div>
                    <div class="top-midle-test secend"><span>2312万</span><span class="huidu">条</span></div>
                </div>
                <div class="top-midle">
                    <div class="top-midle-test">排除信息量</div>
                    <div class="top-midle-test secend"><span style="color: #000;">312万</span><span
                            class="huidu">条</span></div>
                </div>
            </div>
      
        </a-col>
        <a-col  :sm="24" :md="24" :lg="24" :xl="14" :xxl="9">
            <div class="top-box">
                <div class="left-img" style="background: #9adb9a78;"><img :src="getImageUrl('jieguo', 'main')" alt=""></div>
                <div class="top-midle">
                    <div class="top-midle-test">涉渗信息</div>
                    <div class="top-midle-test secend"><span>231万</span><span class="huidu">条</span></div>
                </div>
                <div class="top-midle">
                    <div class="top-midle-test">本周新增</div>
                    <div class="top-midle-test secend"><span style="color: #000;">1212万</span><span
                            class="huidu">条</span></div>
                </div>
                <div class="top-midle">
                    <div class="top-midle-test">今日新增</div>
                    <div class="top-midle-test secend"><span style="color: #000;">3122万</span><span
                            class="huidu">条</span></div>
                </div>
            </div>
        </a-col>
        <a-col  :sm="24" :md="24" :lg="24" :xl="24" :xxl="9">
            <div class="top-box">
                <div class="left-img"><img :src="getImageUrl('wangluo', 'main')" alt=""></div>
                <div class="top-midle">
                    <div class="top-midle-test">涉渗信息</div>
                    <div class="top-midle-test secend"><span>12312万</span><span class="huidu">条</span></div>
                </div>
                <div class="top-midle">
                    <div class="top-midle-test">本周新增</div>
                    <div class="top-midle-test secend"><span style="color: #000;">1231万</span><span
                            class="huidu">条</span></div>
                </div>
                <div class="top-midle">
                    <div class="top-midle-test">今日新增</div>
                    <div class="top-midle-test secend"><span style="color: #000;">12万</span><span
                            class="huidu">条</span></div>
                </div>
            </div>
        </a-col>
    </a-row>
</template>
<script setup>

const arr=[{
    label:'监测信息总量',
    img:'dingdan',
    number:1231231231
}]
const getImageUrl = (name, folder) => {
    return new URL(`../../../assets/${folder}/${name}.png`, import.meta.url)
        .href;
};
</script>

<style lang="scss" scoped>
.top-box {
    display: flex;
    padding: 20px;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    // &:hover{
        box-shadow:
        2.8px 0.6px 2.2px rgba(0, 0, 0, 0.027),
        6.7px 1.4px 5.3px rgba(0, 0, 0, 0.035),
        12.5px 2.6px 10px rgba(0, 0, 0, 0.041),
        22.3px 4.7px 17.9px rgba(0, 0, 0, 0.048),
        41.8px 8.8px 33.4px rgba(0, 0, 0, 0.057),
        100px 21px 80px rgba(0, 0, 0, 0.07);
    // }

    .top-midle {
        flex: 1;
        margin-left: 6%;

        &-test {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #3b3a3a;
            font-weight: 600;
            font-size: $base-font-size-big;

            &.secend {
                margin-top: 5%;
            }

            & span {

                color: $base-color-default;
                margin-right: 3%;
            }

            .huidu {
                color: #666363;
            }
        }
    }



    .left-img {
        width: 50px;
        height: 50px;
        background: #e9f5ff;
        border-radius: 50%;

        & img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>